<template>
    <div class="recommended">
        <h2>为你推荐</h2>
        <ul class="uls">
            <router-link tag="li" v-for="item in recomList" :key="item.id" :to="`/details/${item.id}`">
                <!-- 只解决图片加载不出,但是不能解决图片懒加载 -->
                <!-- <img class="img" :src="item.image" :onerror="defaultImg" alt="" /> -->
                <!-- 解决懒加载,但是没有解决图片加载不出能解决的问题 -->
                <!-- <van-image class="img" lazy-load :src="item.image" alt="" /> -->

                <!-- 图片懒加载,且图片显示不出来的时候使用默认图片  -->
                <van-image class="img" lazy-load :src="item.image" alt="">
                    <template v-slot:error>
                        <img src="../assets/image/noGood.png" alt="" />
                    </template>
                </van-image>
                <h3>{{ item.store_name }}</h3>
                <div>￥ {{ item.price }}</div>
            </router-link>

            <div ref="more" class="more" @click="addlim">{{ limitIndex >= 16 ? "没有更多了..." : "点击加载更多...." }}</div>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recomList: [],
            limitIndex: 10,
        };
    },
    methods: {
        getrecomList() {
            this.axios.get(`/product/hot?page=1&limit=${this.limitIndex}`).then((re) => {
                this.recomList = re;
            });
        },
        // 点击加载更多
        addlim() {
            this.limitIndex = 16;
            this.getrecomList();
        },

        // 滚动加载更多
        scrollfn() {
            let a = document.scrollTop || document.documentElement.scrollTop;
            let b = window.innerHeight;
            let c = this.$refs.more.offsetTop;
            if (a + b + 50 >= c) {
                this.addlim();
            }
        },
    },
    created() {
        this.getrecomList();
    },
    mounted() {
        // 滚动获取更多
        window.addEventListener("scroll", this.scrollfn);
    },

    // 干掉全局滚动事件
    beforeDestroy() {
        window.removeEventListener("scroll", this.scrollfn);
    },
    beforeRouteLeave(to, from, next) {
        window.removeEventListener("scroll", this.scrollfn);
        next();
    },
};
</script>

<style lang="scss" scoped>
.recommended {
    h2 {
        text-align: center;
        font-size: 16px;
        margin: 30px 0;
        position: relative;
        &::before {
            content: "";
            width: 85px;
            height: 1px;
            background: #ccc;
            position: absolute;
            left: 10%;
            top: 50%;
            transform: translate(0, -50%);
        }

        &::after {
            content: "";
            width: 85px;
            height: 1px;
            background: #ccc;
            position: absolute;
            right: 10%;
            top: 50%;
            transform: translate(0, -50%);
        }
    }

    .uls {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        li {
            margin-top: 10px;
            .img {
                width: 167.5px;
                height: 167.5px;
                border-radius: 12px;
            }
            h3 {
                width: 167.5px;
                overflow: hidden; // 溢出部分隐藏
                white-space: nowrap; // 文字不换行
                text-overflow: ellipsis; // 显示省略号

                font-size: 14px;
                margin: 10px 0 5px 0;
            }
            div {
                font-size: 14px;
                color: red;
            }
        }
    }
}
.van-image__error {
    display: none !important;
}
.more {
    line-height: 50px;
    text-align: center;
}
</style>
